<!-- 实验室管理 开放管理:预约申请 -->
<template>
	<view>
		<view class="search-input ">
			<view class="labletitle"><label>日期</label></view>
			<view class="controlvalue">
				<u-cell-item icon="calendar" :value="datevalue" @click="calopen"></u-cell-item>
			</view>
		</view>
		
		<view class="search-input ">
			<label class="iconfont icon-sousuo" />
		     <input type="text" confirm-type="search" v-model="search" class="font-size24" placeholder="搜索" />
		</view>
		
		<scroll-view class="content" scroll-y @scrolltolower="scrollButtonClick" id="height" :style="'height:' + height + 'px ;'">
			<view class="jn-grid-list">
				<view class="jn-staff-list-cell">
					<uni-swipe-action>
						<uni-swipe-action-item v-for="(item,index) in staffs" :options="options" :key="index" >
							
							<u-card :title="item.F_DepartmentName" @click="creqateopen" >
								<template v-slot:body>
									
									<view >
										<u-parse :html="item.F_Gender"></u-parse>
									</view>
								</template>
								<template v-slot:foot>
									<view >
										<view class="color-3A3A3A">家长：{{item.F_Class}}</view>
										<view class="color-3A3A3A">时间：{{item.F_Date}}</view>
									</view>
									<!-- <view class=""><u-icon name="chat-fill" size="34" color="" label="30评论"></u-icon></view> -->
								</template>
							</u-card>
							
						</uni-swipe-action-item>
					</uni-swipe-action>
				</view>
			</view>
		</scroll-view>
	    <!-- 添加按钮 -->
		<uni-fab :pattern="pattern" :horizontal="horizontal" :vertical="vertical" :direction="direction" @creqateopen="creqateopen" v-if="v_show"></uni-fab>
	</view>
</template>

<script>
	import uniFab from '@/components/uni-fab/uni-fab.vue';
	import uniSwipeAction from '@/components/uni-swipe-action/uni-swipe-action.vue'
	import uniSwipeActionItem from '@/components/uni-swipe-action-item/uni-swipe-action-item.vue'
	export default {
		components: {
			uniFab,
			uniSwipeAction,
			uniSwipeActionItem
		},
		data() {
			return {
				v_show:false,
				search: '',
				rows: 10,
				page: 1,
				total: 1,
				height: 0,
				staffList: [],
				horizontal: 'right',
				vertical: 'bottom',
				direction: 'horizontal',
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#007AFF',
					buttonColor: "#007AFF"
				},
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}],
			}
		},
		onLoad() {
			this.init();
		},
		computed: {
			staffs: function() {
				let search = this.search;
				let staffList = this.staffList;
				// console.log(staffList)
				if (search) {
					return staffList.filter(function(product) {
						return Object.keys(product).some(function(key) {
							return String(product[key]).toLowerCase().indexOf(search) > -1
						})
					})
				}
				return staffList
			}
		},
		mounted() {
			uni.getSystemInfo({
				success: (res) => {
					this.height = res.windowHeight;
				}
			});
		},
		onShow() {
			this.staffs.length = 0;
			this.init();
			this.$forceUpdate();
		},
		methods: {
			/* 根据不同用户返回不同菜单 */
			  dogetmenu(){
				//vue 模拟后台返回json数组，赋在页面数据json的列表中
				//https://www.cnblogs.com/hailexuexi/p/14930809.html
				var jsonArrStr ='';
				
				var userid=uni.getStorageSync('userid');
				console.log('研学-用户:'+userid);
				
				/* 政府 */
				if(userid=="1001"){
				  jsonArrStr=jsonArrStr+'[{"id": "","enCode": "","class": "刘备","gender": "‌<p>服务质量问题<p>投诉旅游公司或景区提供的服务质量低下，导游服务不专业、态度恶劣，行程安排不合理，酒店住宿条件差，餐饮卫生问题‌","departmentName": "闵行春申小学","num": "250","date": "2025-03-16 18:00:01"}';
				  jsonArrStr=jsonArrStr+',{"id": "","enCode": "","class": "孙权","gender": "‌<p>服务质量问题<p>投诉旅游公司或景区收费不透明、不合理、存在乱收费现象‌","departmentName": "闵行春申小学","num": "198","date": "2025-03-16 18:32:01"}';
				  jsonArrStr=jsonArrStr+',{"id": "","enCode": "","class": "曹操","gender": "‌<p>安全问题‌<p>投诉旅游过程中出现的安全隐患，如旅游设施不安全、缺乏必要的安全警示","departmentName": "闵行春申小学","num": "268","date": "2025-03-18 18:00:01"}';
				  jsonArrStr=jsonArrStr+',{"id": "","enCode": "","class": "嬴政","gender": "‌<p>服务质量问题","departmentName": "闵行莘城学校","num": "292","date": "2025-03-18 21:00:01"}';
				  jsonArrStr=jsonArrStr+',{"id": "","enCode": "","class": "刘邦","gender": "<p>‌合同问题‌<p>投诉旅游公司未按照合同约定提供服务","departmentName": "闵行莘城学校","num": "190","date": "2025-03-26 18:00:01"}';
				  jsonArrStr=jsonArrStr+',{"id": "","enCode": "","class": "朱元璋","gender": "‌<p>服务质量问题<p>‌商品及收费问题‌：投诉旅游过程中购买的商品存在质量问题，如假冒伪劣、以次充好等","departmentName": "闵行莘城学校","num": "212","date": "2025-03-26 19:00:01"}';
				  jsonArrStr=jsonArrStr+']';	
				}
				
				/* 机构 */
				if(userid=="2001"){
				  jsonArrStr=jsonArrStr+'[{"id": "","enCode": "","class": "刘备","gender": "‌<p>服务质量问题<p>投诉旅游公司或景区提供的服务质量低下，导游服务不专业、态度恶劣，行程安排不合理，酒店住宿条件差，餐饮卫生问题‌","departmentName": "闵行春申小学","num": "250","date": "2025-03-16 18:00:01"}';
				  jsonArrStr=jsonArrStr+',{"id": "","enCode": "","class": "曹操","gender": "‌<p>安全问题‌<p>投诉旅游过程中出现的安全隐患，如旅游设施不安全、缺乏必要的安全警示","departmentName": "闵行春申小学","num": "268","date": "2025-03-18 18:00:01"}';
				  jsonArrStr=jsonArrStr+',{"id": "","enCode": "","class": "嬴政","gender": "‌<p>服务质量问题","departmentName": "闵行莘城学校","num": "292","date": "2025-03-18 21:00:01"}';
				  jsonArrStr=jsonArrStr+',{"id": "","enCode": "","class": "刘邦","gender": "<p>‌合同问题‌<p>投诉旅游公司未按照合同约定提供服务","departmentName": "闵行莘城学校","num": "190","date": "2025-03-26 18:00:01"}';
				  jsonArrStr=jsonArrStr+']';
				
				}
				
				/* 基地 */
				if(userid=="3001"){
				  jsonArrStr=jsonArrStr+'[{"id": "","enCode": "","class": "刘备","gender": "‌<p>服务质量问题<p>投诉旅游公司或景区提供的服务质量低下，导游服务不专业、态度恶劣，行程安排不合理，酒店住宿条件差，餐饮卫生问题‌","departmentName": "闵行春申小学","num": "250","date": "2025-03-16 18:00:01"}';
				  jsonArrStr=jsonArrStr+',{"id": "","enCode": "","class": "刘邦","gender": "<p>‌合同问题‌<p>投诉旅游公司未按照合同约定提供服务","departmentName": "闵行莘城学校","num": "190","date": "2025-03-26 18:00:01"}';
				  jsonArrStr=jsonArrStr+']';
				
				}
				
				/* 学校 */
				if(userid=="4001"){
				  jsonArrStr=jsonArrStr+'[{"id": "","enCode": "","class": "刘备","gender": "‌<p>服务质量问题<p>投诉旅游公司或景区提供的服务质量低下，导游服务不专业、态度恶劣，行程安排不合理，酒店住宿条件差，餐饮卫生问题‌","departmentName": "闵行春申小学","num": "250","date": "2025-03-16 18:00:01"}';
				  jsonArrStr=jsonArrStr+',{"id": "","enCode": "","class": "孙权","gender": "‌<p>服务质量问题<p>投诉旅游公司或景区收费不透明、不合理、存在乱收费现象‌","departmentName": "闵行春申小学","num": "198","date": "2025-03-16 18:32:01"}';
				  jsonArrStr=jsonArrStr+',{"id": "","enCode": "","class": "曹操","gender": "‌<p>安全问题‌<p>投诉旅游过程中出现的安全隐患，如旅游设施不安全、缺乏必要的安全警示","departmentName": "闵行春申小学","num": "268","date": "2025-03-18 18:00:01"}';
				  jsonArrStr=jsonArrStr+']';
				
				}
				
				/* 老师 */
				if(userid=="5001"){
				  jsonArrStr=jsonArrStr+'[{"id": "","enCode": "","class": "刘备","gender": "‌<p>服务质量问题<p>投诉旅游公司或景区提供的服务质量低下，导游服务不专业、态度恶劣，行程安排不合理，酒店住宿条件差，餐饮卫生问题‌","departmentName": "闵行春申小学","num": "250","date": "2025-03-16 18:00:01"}';
				  jsonArrStr=jsonArrStr+',{"id": "","enCode": "","class": "孙权","gender": "‌<p>服务质量问题<p>投诉旅游公司或景区收费不透明、不合理、存在乱收费现象‌","departmentName": "闵行春申小学","num": "198","date": "2025-03-16 18:32:01"}';
				  jsonArrStr=jsonArrStr+']';
				
				}
				
				/* 学生 */
				if(userid=="6001"){
				  jsonArrStr=jsonArrStr+'[{"id": "","enCode": "","class": "刘备","gender": "‌<p>服务质量问题<p>投诉旅游公司或景区提供的服务质量低下，导游服务不专业、态度恶劣，行程安排不合理，酒店住宿条件差，餐饮卫生问题‌","departmentName": "闵行春申小学","num": "250","date": "2025-03-16 18:00:01"}';
				  jsonArrStr=jsonArrStr+']';
				
				  this.v_show=true;
				}
				
				/* 家长 */
				if(userid=="7001"){
				  jsonArrStr=jsonArrStr+'[{"id": "","enCode": "","class": "刘备","gender": "‌<p>服务质量问题<p>投诉旅游公司或景区提供的服务质量低下，导游服务不专业、态度恶劣，行程安排不合理，酒店住宿条件差，餐饮卫生问题‌","departmentName": "闵行春申小学","num": "250","date": "2025-03-16 18:00:01"}';
				  jsonArrStr=jsonArrStr+']';	
				  
				  this.v_show=true;
				
				}
				
				//console.log(jsonArrStr);
				
				var jsonArr = JSON.parse(jsonArrStr);//将字符串 转为 json对象 数组 JSON.parse要求 json格式 严格
				//console.log(jsonArr);
				
				return jsonArr;
			},
			
			init() {
				var res={
					"data": {
						"code": 200,
						"msg": "Success",
						"data": {
							"list": [
								{
									"id": "5dd1b361109e4ebbb5897ba9057513de",
									"enCode": "化学系",
									"fullName": "内部预约",
									"gender": "09:00~10:30",
									"departmentName": "2025-01-10",
									"positionName": "奉化学楼105",
									"telephone": "有机化学实验操作课"
								}
							],
							"pagination": {
								"currentPage": 1,
								"pageSize": 10,
								"total": 635
							}
						}
					},
					"statusCode": 200,
					"errMsg": "request:ok",
					"cookies": []
				}
				this.page = 1;
				let _total = Math.ceil(res.data.data.pagination.total/res.data.data.pagination.pageSize)
				this.total = _total;
				// console.log(this.total)
				//let staff = res.data.data.list;
				let staff =this.dogetmenu();
				this.staffList=[];
				for (let i = 0; i < staff.length; i++) {
					this.staffList.push({
						'F_Id': staff[i].id,
						'F_EnCode': staff[i].enCode,
						'F_Gender': staff[i].gender,
						'F_DepartmentName': staff[i].departmentName,
						'F_Num': staff[i].num,
						'F_Class': staff[i].class,
						'F_Date': staff[i].date
					})
				}
			},
			scrollButtonClick() {
				console.log("scrollButtonClick")
			},
			staffflow(item) {
				uni.navigateTo({
					url: './form?id=' + item.F_Id
				})
			},
			removeDetils(item, index) {
				console.log(item)
			},
			creqateopen() {
				uni.navigateTo({
					url: './form'
				});
			}
		},
	}
</script>

<style lang="scss">
	page {
		background-color: #f0f2f6;
	}
	.jn-item-cell-left {
		width: 46%;
	}

	.search-input {
		background: #FFFFFF;
	}
	
	.u-content {
			margin-top: 20rpx;
			color: $u-content-color;
			font-size: 48rpx;
			line-height: 1.8;
			
			// 标签形式无效
			p {
				color: $u-tips-color;
			}
		}

	.item {
		border-radius: 10upx;
		width: 100%;

		.jn-item-cell {
			padding: 0;
			background-color: #FFFFFF;
			.jn-list-cell {
				padding: 0 20upx;
				margin-bottom: 10upx;

				&.cell {
					height: 48upx;
					.rightWidth{
						width: 200rpx;
					}
				}
			}
		}

		.head {
			height: 66upx;
			border-bottom: 1upx solid #e5e5e5;
		}
	}
</style>
